<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数据</title>
    </head>
    <body>
        <div id="app">
            {{ message }}
        </div>

        <script type="module">
            import Vue from '../vue.esm.browser.js'
        
            const app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello, Vue!'
                },
                beforeCreate() {
                    console.log('beforeCreate')
                },
                created() {
                    console.log('created')
                },
                beforeMount() {
                    console.log('beforeMount')
                },
                mounted() {
                    console.log('mounted')
                },
                beforeUpdate() {
                    console.log('beforeUpdate')
                },
                updated() {
                    console.log('updated')
                },
                beforeDestroy() {
                    console.log('beforeDestroy')
                },
                destroyed() {
                    console.log('destroyed')
                }
            })

            setTimeout(() => {
                app.message = 'Hello, world!'
            }, 3000)

            setTimeout(() => {
                app.$destroy()
            }, 5000)
        </script>
    </body>
</html>